<template>
    <div class="tmpl goodsList">
        <div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6" :key="item.id">
		          <a href="javascript:void(0)" @click="goGoodsInfo(item.id)">
		            <img class="mui-media-object" :src="item.img_url">
		            <div class="mui-media-body">{{item.title}}</div>
						    <div class="desc">
						    	<p>
						    		<span>{{item.sell_price}}</span>
						    		<s>{{item.market_price}}</s>
						    	</p>
						    	<p>
						    		<span>热卖中</span>
						    		<span>剩余{{item.stock_quantity}}件</span>
						    	</p>
						    </div>
              </a>
            </li>
		    </ul>    
		</div>
    </div>
</template>

<script>
import common from "../../../statics/js/common.js";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getGoodsList("1");
  },
  methods: {
    getGoodsList(pageindex) {
      pageindex = pageindex || "1";
      this.$http
        .get(common.domain + "/api/getgoods?pageindex=" + pageindex)
        .then(re => {
          if (re.body.status != "0") {
            this.$toast(re.body.message);
            return;
          }
          this.list = re.body.message;
        });
    },
    goGoodsInfo(id){
      this.$router.push({name:'goodsinfo',params:{id:id}})
    }
  }
};
</script>

<style lang="scss" scoped>
.goodsList {
  li {
    -webkit-box-shadow: 0 0 4px #000;
    -moz-box-shadow: 0 0 4px #000;
    box-shadow: 0 0 4px #000;
    margin-left: 4px;
    padding: 5px;
    a {
      text-align: center;
      padding:0;
      .mui-media-object {
        width: 100px;
        height: 300px;
      }
      .mui-media-body {
        font-size: 14px;
        line-height: 20px;
      }
      .desc {
        height: 60px;
        background-color: rgba(0, 0, 0, 0.1);
        margin-top: 10px;
        padding: 5px;
        text-align: left;
        p {
          width: 100%;
          margin: 5px 0;
          &:first-child {
            span {
              color: red;
              font-weight: bold;
              font-size: 13px;
              margin-right: 15px;
            }
            s {
              font-size: 12px;
            }
          }
          &:last-child {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
